<template>
  <div v-for="(item, index) in foodRankList.slice(0, MAX_RANK_COUNT)"
       :key="index" class="rank-item">
    <span class="rank-index">{{ index+1 }}.</span>
    <span class="rank-content">{{ item.name }}</span>
    <span class="rank-amount">{{ item.value }} 次</span>
  </div>
</template>

<script setup lang="ts">
import { useFoodStore } from '@/store/food'
import { computed } from 'vue'

const foodStore = useFoodStore()

const MAX_RANK_COUNT = 10

const foodRankList = computed(() => foodStore.rankStats)
</script>
